<template>
  <div class="cshj-middle">
    <div class="left-wrappar">
      <cshj-header left-title="更多下载" right-title="More"></cshj-header>

      <div class="btn-wrappar" :style="{backgroundImage:'url('+require('../../assets/bg.gif')+')'}">
        <cshj-button
          v-for="(item, index) in btnlist"
          :position="{ type: '1', index: index }"
          :title="item.title"
          :icon="item.icon"
          type="column"
          :key="index"></cshj-button>
      </div>
    </div>

    <div class="middle-wrappar">
      <cshj-header left-title="游戏公告" right-title="News"></cshj-header>

      <el-tabs class="tab" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane class="tab-pane" label="回收价格" name="first">
          <img :src="nsjl" style="width: 100%"/>
          <el-scrollbar style="height: 280px; margin-top: 10px">
            <recycle-pane></recycle-pane>
          </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane class="tab-pane" label="版本介绍" name="second">
          <img :src="nsjl" style="width: 100%"/>
          <el-scrollbar style="height: 280px; margin-top: 10px">
            <div class="content" v-for="(item, index) in news" :key="index">
              <div>【重点】</div>
              <span>{{ item }}</span>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane class="tab-pane" label="充值比例" name="third">
          <img :src="nsjl" style="width: 100%"/>
          <el-scrollbar style="height: 280px; margin-top: 10px">
            <div>
              【优惠】&nbsp;&nbsp;&nbsp;
              <span>充值0030&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0020元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获得元宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10W 颗</span>
              <span style="color: #e6a23c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无赞助封号</span>
            </div>
            <div>
              【优惠】&nbsp;&nbsp;&nbsp;
              <span>充值0050&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0030元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获得元宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;16W 颗</span>
              <span style="color: #e6a23c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无赞助封号</span>
            </div>
            <div>
              【优惠】&nbsp;&nbsp;&nbsp;
              <span>充值0100&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0100元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获得元宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;40W 颗</span>
              <span style="color: #e6a23c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无赞助封号</span>
            </div>
            <div>
              【优惠】&nbsp;&nbsp;&nbsp;
              <span>充值0200&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0300元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获得元宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100W 颗</span>
              <span style="color: #e6a23c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无赞助封号</span>
            </div>
            <div>
              【优惠】&nbsp;&nbsp;&nbsp;
              <span>充值0300&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0500元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获得元宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;160W 颗</span>
              <span style="color: #e6a23c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无赞助封号</span>
            </div>
            <div>【优惠】&nbsp;&nbsp;&nbsp;
              <span>充值0500&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0800元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获得元宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;260W 颗</span>
              <span style="color: #e6a23c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无赞助封号</span>
            </div>
            <div>
              【优惠】&nbsp;&nbsp;&nbsp;
              <span>充值1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2000元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获得元宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;600W 颗</span>
              <span style="color: #e6a23c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无赞助封号</span>
            </div>
            <div>
              【优惠】&nbsp;&nbsp;&nbsp;
              <span>充值2000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6000元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获得元宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1600W 颗</span>
              <span style="color: #e6a23c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无赞助封号</span>
            </div>
            <div>
              【优惠】&nbsp;&nbsp;&nbsp;
              <span>充值3000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12000元&nbsp;&nbsp;&nbsp;&nbsp;获得元宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3000W 颗</span>
              <span style="color: #e6a23c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无赞助封号</span>
            </div>
            <div>
              【优惠】&nbsp;&nbsp;&nbsp;
              <span>充值5000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;送&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;25000元&nbsp;&nbsp;&nbsp;&nbsp;获得元宝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6000W 颗</span>
              <span style="color: #e6a23c">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无赞助封号</span>
            </div>
            <div :class="animated" style="margin-top: 20px; font-size: 18px">
              早充晚充都多送120%元宝、积分，积分比例1：100
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane class="tab-pane" label="开区时间" name="fourth">
          <img :src="nsjl" style="width: 100%"/>
          <el-scrollbar style="height: 280px; margin-top: 10px">
            <div>【等你来】<span>創世星王一区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09：00&nbsp;&nbsp;全国多线&nbsp;&nbsp;保证不卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开放中……</span><p :class="animated">hot~</p></div>
            <div>【等你来】<span>創世星王一区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;15：00&nbsp;&nbsp;全国多线&nbsp;&nbsp;保证不卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开放中……</span><p :class="animated">hot~</p></div>
            <div>【等你来】<span>創世星王一区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20：00&nbsp;&nbsp;全国多线&nbsp;&nbsp;保证不卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开放中……</span><p :class="animated">hot~</p></div>
            <div>【等你来】<span>創世星王一区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;23：00&nbsp;&nbsp;全国多线&nbsp;&nbsp;保证不卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开放中……</span><p :class="animated">hot~</p></div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import CshjHeader from '../../components/Header/index'
import CshjButton from '../../components/Button/index'
import RecyclePane from '../../components/Recycle/RecyclePane'
import nsjl from '../../assets/sasfd.jpg'

export default {
  name: 'Middle',
  components: { RecyclePane, CshjButton, CshjHeader },
  data () {
    return {
      btnlist: [
        { icon: 'iconfont icon-wenjian', title: '纯净客户端' },
        { icon: 'iconfont icon-wenjian', title: '完整客户端' },
        { icon: 'iconfont icon-filezip2', title: '综合补丁本地下载' },
        { icon: 'iconfont icon-filezip2', title: '综合补丁网盘下载' },
        { icon: 'iconfont icon-windows2', title: 'Win7 64系统补丁' },
        { icon: 'iconfont icon-eye1', title: '游戏花屏补丁' },
        { icon: 'iconfont icon-download', title: '电脑黑屏补丁' },
        { icon: 'iconfont icon-computer', title: '沙巴克 盟重补丁' },
        { icon: 'iconfont icon-house', title: '极速微端下载' },
        { icon: 'iconfont icon-setting1', title: '网通IP加速补丁' }
      ],
      activeName: 'first',
      news: [
        '版本简介：創世合击为1.80星王微复古版本，装备保值，高额现金回收，玩法丰富，打金圣地！',
        '关于充值①：无赞助，无倍攻，无经验倍数，公司运营，不接受汇款！',
        '关于充值②：200元满回馈，1.2倍回收宝箱、幸运花……更多丰富内容请游戏内体验！',
        '关于升级①：基础泡点助散人玩家升到52级，领取升级奖励快速起步！',
        '关于升级②：怪物爆满珠子，打怪经验是传统复古星王10倍，珠子好卡，吃着火锅打着怪就把等级升了！',
        '最新活动：激情派对--土城树妖--障碍赛跑--天降神兵--荣耀宝箱',
        '攻沙说明：第三天合区首次拿沙，奖励100W元宝+300RMB！',
        '装备次序：雷霆--战神--星王--荣耀--创世--三大神器（无合成，全部靠打，装备超值钱！）',
        '怪物介绍①：禅、光明皇帝、女娲三大人形怪不能错过，爆率超超超超级高！',
        '怪物介绍②：神殿天魔、不动明王、赤阳猎龙、断尾妖狐爆率超超超超级高！',
        '装备出处①：魔龙教主12000血爆一切，12000血以上怪物星王荣耀爆率高！',
        '装备出处②：镇妖塔、三大终极地图爆神器剑甲！',
        '合区介绍：三天一合区，四天一站区，16天一季度！',
        '技术人员深耕IT行业多年，封挂手段多样，敢开必封IP机器码，营造干净游戏环境！'
      ],
      animated: '',
      nsjl
    }
  },
  mounted () {
    setTimeout(() => {
      this.animated = 'animated jello'
    }, 3000)
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style lang="scss">
.cshj-middle {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-tabs__item {
    color: $font-color;
    &:hover {
      color: $font-color-active;
    }
  }
  .el-tabs__item.is-active {
    color: $font-color-active;
  }
  .el-tabs__active-bar {
    background-color: $font-color-active;
  }
  .el-tabs__item {
    font-size: 16px;
  }
  .el-tabs__active-bar {
    height: 4px;
  }
  .el-tabs__header {
    .el-tabs__nav-wrap {
      display: flex;
      justify-content: space-between;
      &:after {
        height: 1px;
        background-color: #464646;
      }
    }
  }
  .el-tabs__nav-scroll {
    margin: 0 auto;
  }
}
</style>
<style scoped lang="scss">
.cshj-middle {
  display: flex;
  justify-content: space-between;
  width: 744px;
  .left-wrappar {
    width: 154px;
    .btn-wrappar {
      display: flex;
      flex-wrap: wrap;
    }
  }
  .middle-wrappar {
    height: 550px;
    width: 570px;
    .tab {
      height: 500px;
      background-color: $bg-color;
      padding: 0 10px;
      .tab-pane {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        div {
          display: flex;
          color: $font-color-active;
          margin-bottom: 8px;
          span {
            color: $white;
          }
          p {
            margin: 0;
            color: red;
            margin-left: 30px;
          }
        }
        .content {
          display: flex;
          div {
            min-width: 60px;
            margin-bottom: 4px;
          }
        }
      }
    }
  }
  .right-wrappar {
    height: 550px;
    .content {
      background-color: $bg-color;
      height: 330px;
    }
  }
}
</style>
